<style>
.price{margin-bottom: 5px;display: block;float: left;width: 100%;}
.price i{font-size: 30px;cursor:pointer}
.layui-input-block input{ padding-left: 10px;height: 38px;margin-right: 5px;
	line-height: 38px;
	line-height: 36px\9;
	border: 1px solid #e6e6e6;
	background-color: #fff;
	border-radius: 2px;}
</style>
<div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <form class="layui-form" action="<?=url('goods/add');?>">
            <div class="layui-form-item">
              <label class="layui-form-label">分类</label>
              <div class="layui-input-block">
				  <input type="text" class="layui-input layui-disabled"  value="<?php foreach($cat_list as $k=>$v):?><?php if($k != 0):?>-><?php endif;?><?=$v["cat_title"]?><?php endforeach;?>" />
				  <input type="hidden" name="cat_id" value="<?=$v['id']?>"/>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">标题</label>
              <div class="layui-input-block">
                <input type="text" name="title"  required lay-verify="required" placeholder="请输入商品标题" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">价格</label>
              <div class="layui-input-block">
                <input type="text" name="price" required lay-verify="required" placeholder="请输入价格" class="layui-input">
              </div>
            </div>
			<div class="layui-form-item">
              <label class="layui-form-label">关键词</label>
              <div class="layui-input-block">
                <input type="text" name="keyword" placeholder="请输入关键词" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">描述</label>
              <div class="layui-input-block">
                <input type="text" name="description" placeholder="请输入描述" class="layui-input">
              </div>
            </div>
			<div class="layui-form-item">
              <label class="layui-form-label">封面图</label>
              <div class="layui-input-block">
                  <button type="button" class="layui-btn" id="myupimg">
                    上传单独
                  </button>
                  <input type="hidden" name="pic" value="" />
                  <div style="display:inline-block;position:relative;">
                      <span style="position:absolute;right:-15px; top:-15px;cursor:pointer;color:#ccc;font-size:24px;display:none;" id="closeimg">x</span>
                      <img id="pic" height=50 src="" />
                  </div>
              </div>
            </div>
			<div class="layui-form-item">
		        <label class="layui-form-label">橱窗图</label>
		        <div class="layui-input-block">
		            <div class="layui-upload">
		                <button type="button" class="layui-btn" id="multiplepics">
		                    <i class="layui-icon">&#xe67c;</i>上传多图
		                </button>
		                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
		                    预览图：
		                    <div class="layui-upload-list" id="multiplepicsshow"></div>
		                </blockquote>
		            </div>
		        </div>
		    </div>
			<div class="layui-form-item">
		        <label class="layui-form-label">设置规格</label>
		        <input type="hidden" value="[]" id="spec" name="spec"/>
		        <div class="layui-input-block">
		            <div class="layui-btn layui-btn-xs layui-btn-normal" onclick="addSpec(this)"><i class="layui-icon">&#xe654;</i><cite>添加规格</cite></div>
		            <ul class="attr">
		                <?php foreach($spec_list as $k=>$v): ?>
		                <li>
		                    <input type="text" class="one"  name="attr_name[]" value="<?=$v['title']?>">
		                    <input type="text" class="two"  placeholder="多个值用逗号隔开" name="attr_value[]">
		                    <i onclick="remove(this)" class="layui-icon">-</i>
		                </li>
		                <?php endforeach;?>
		            </ul>
		            <div class="layui-btn fr layui-btn-sm layui-btn-normal" onclick="create_attr()">生成规格预览</div>
		            <div id="attr_view">
		            </div>
		        </div>
		    </div>
		    <div class="layui-form-item">
		        <label class="layui-form-label">详情</label>
		        <div class="layui-input-block">
		            <script id="container" name="content" type="text/plain"></script>
		        </div>
		    </div>
		    <div class="layui-form-item">
		        <label class="layui-form-label">属性</label>
		        <div class="layui-input-block">
		            <textarea  name="attr" placeholder="格式: 品牌:耐克; 产地:美国;" class="layui-textarea"></textarea>
		            <div class="layui-form-mid layui-word-aux">冒号隔开属性和值，多个属性以分号隔开</div>
		        </div>
		    </div>
		    <div class="layui-form-item">
		        <label class="layui-form-label">邮费</label>
		        <div class="layui-input-block">
		            <input type="text" name="postage" placeholder="请输入邮费" value="0" class="layui-input">
		        </div>
		    </div>
			<div class="layui-form-item">
		        <label class="layui-form-label">状态</label>
		        <div class="layui-input-block">
		          <input type="radio" name="status" value="0" title="上架" checked>
		          <input type="radio" name="status" value="1" title="下架">
		        </div>
		      </div>
		    <div class="layui-form-item">
		        <div class="layui-input-block">
		            <button class="layui-btn" lay-submit lay-filter="myform">立即提交</button>
		            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		        </div>
		    </div>
        </form>
      </div>
    </div>
</div>
<script>
layui.use(['form','upload'], function(){
  var $ = layui.$
  ,upload = layui.upload
  ,form = layui.form;
  form.render();
  var ue = UE.getEditor('container');
});
</script>

<script>
/**
 * 添加规格
 * @param e
 */
function addSpec(e) {
	var contents = `
	<li>
		<input type="text" class="one" name="attr_name[]" value="">
		<input type="text" class="two" placeholder="多个值用逗号隔开" name="attr_value[]">
		<i onclick="remove(this)" class="layui-icon">-</i>
	</li>
	`;
	$(e).next().append(contents);
}
function remove(e){
	if($(".attr li").length==1){
		layer.msg('至少需要一个规格');
		return false;
	}
	$(e).parent("li").remove();
}
/**
 * 生成规格预览
 */
function create_attr(){
	var attr_list = {};//规格名称列表
	$("input[name='attr_name[]']").each(function (i,e) {
		attr_list[i] = $(e).val();
	})
	//规格值列表
	var value_list = {};
	$("input[name='attr_value[]']").each(function (i,e) {
		value_list[i] = $(e).val();
	})
	$.ajax({
		url:"<?=url('goodsprice/countattr')?>",
		method:'post',
		dataType:'json',
		data:{attr_list:attr_list,value_list:value_list},
		success:function(rs){
			data =  { //数据
				"title":"规格预览"
				,"attr_list":rs.data.spec
				,"attr_value_list":rs.data.arr
			};
			$("#spec").val(JSON.stringify(rs.data.spec));
			layui.use('laytpl', function(){
				var laytpl = layui.laytpl;
				var getTpl = attr_script.innerHTML,view = document.getElementById('attr_view');
				laytpl(getTpl).render(data, function(html){
					view.innerHTML = html;
				});
			});
		}
	});

}
</script>

<script type="text/html" id="attr_script">
    <table class="layui-table">
        <thead>
        <tr>
            {{#  layui.each(d.attr_list, function(index, item){ }}
            <th>{{ index }}</th>
            {{#  }); }}
            <th>库存</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d.attr_value_list, function(index, item){ }}
        <tr>
            {{# var arr = item.split('_');}}
            {{# layui.each(arr, function(i, e){ }}
            <td>{{ e }}</td>
            {{#  }); }}
            <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_stock[]" value="100"/></td>
            <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_price[]" value="100"/></td>
        </tr>
        {{#  }); }}
        </tbody>
    </table>
</script>
